<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div id="app"></div>

    <script src="../../js/react.development.js"></script>
    <script src="../../js/react-dom.development.js"></script>
    <script src="../../js/babel.min.js"></script>


    <script type="text/babel">

      
        class App extends React.Component{

         /*
            三种方案：
            ref = 'key' => this.refs ={key:tDOM}
            ref = {e=>this.key=e} =>this.key = tDOM
            ref={this.key} =>this.key = React.createRef()=> {current:tDOM}
         */

         descRef = React.createRef()

         handleClick=()=>{
            //  01 
            // console.log(this.refs);
            // console.log(this.refs.name);
            // console.log(this.refs.name.value);

            // 02 
            // console.log(this.age);
            // console.log(this.age.value);

            //03 
            console.log(this.descRef);
            console.log(this.descRef.current);
            console.log(this.descRef.current.value);

         }
           
            render(){
                return (
                    <div>
                      name： <input type='text' name='name' ref='name'/>

                      age: <input type='text' name='age'  ref={e=>this.age=e}/>

                      desc: <input type='text' name='age'  ref={this.descRef}/>

                       <button onClick={this.handleClick}>commit</button>
                    </div>
                )
            }
        }

       

        ReactDOM.render(<App />, document.getElementById('app'))
    </script>
</body>

</html>